@import "reset";
@import "footer";
@import "header";
@import "../utils/iconfont.css";

@function getvw($wid){
    @return $wid/750*100 + vw;
}

main{
    .signin{
        width: 94vw;
        margin: getvw(20) auto 0;
        display: flex;
        .signin-img{
            width: getvw(170);
        }
        .signin-message{
            width: calc(94vw - getvw(170));
            display: flex;
            justify-content: space-between;
            align-items: center;
            .signin-right{
                height: getvw(98);
                box-sizing: border-box;
                padding-left: getvw(20);
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                .signin-click{
                    a{
                        color: black;
                        font-weight: 600;
                    }
                }
                .signin-position{
                    color: rgb(147, 147, 147);
                    font-size: 14px;
                }
            }
            .signin-arrow{
                p{
                    font-size: getvw(100);
                }
            }
        }
    }
}

main{
    .history{
        width: 94vw;
        margin: getvw(30) auto;
        display: flex;
        justify-content: space-between;
        .history-item{
            width: getvw(195);
            height: getvw(151);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            i{
                font-size: getvw(86);
                color: #fff;
            }
            p{
                font-size: 14px;
            }
        }
        .comments{
            background-color: #bbe3ab;
        }
        .collections{
            background-color: #a0dce0;
        }
        .coupons{
            background-color: #e0b7a0;
        }
    }
}

main{
    .menu{
        width: 94vw;
        margin: 0 auto;
        .menu-item{
            display: flex;
            justify-content: space-between;
            margin-bottom: getvw(10);
            .menu-item-left{
                display: flex;
                align-items: center;
                i{
                    font-size: getvw(80);
                    color: #ff9344;
                }
                span{
                    font-size: getvw(30);
                }
            }
            .menu-item-right{
                height: getvw(70);
                display: flex;
                align-items: center;
                i{
                    color: #ff9344;
                    font-size: getvw(40);
                }
            }
            &:first-child .menu-item-left i{
                color: #f09e10;
            }
            &:nth-child(3) .menu-item-left i{
                color: #b2e0a0;
            }
            &:nth-child(4) .menu-item-left i{
                color: #d1eef0;
            }
        }
        .menu-space{
            height: getvw(50);
        }
    }
}

main{
    .buttonbox{
        width: 94vw;
        display: flex;
        justify-content: space-around;
        .btn{
            button{
                width: getvw(147);
                height: getvw(76);
                border-radius: getvw(38);
                background-color: #ff9344;
                color: #fff;
                font-size: smaller;
                text-align: center;
                line-height: getvw(76);
                border: none;
            }
        }
    }
}